<template>
  <div class="search-history">
    <!-- 标题 -->
    <van-cell title="历史记录">
      <span v-show="showIcon" @click="delAll">删除全部</span>
      <span v-show="showIcon" @click="showIcon=!showIcon">完成</span>
      <van-icon v-show="!showIcon" @click="showIcon=!showIcon" name="delete" />
    </van-cell>
    <!-- 记录 -->
    <van-cell
      @click="$emit('HISTORY_EVENT',item)"
      v-for="(item,index) in historyList"
      :key="index"
      :title="item"
    >
      <van-icon
        slot="right-icon"
        v-show="showIcon"
        @click="delOneself"
        style="line-height: 100%;"
        name="close"
      />
      <!-- <van-icon name="search" style="font-size: 16px; line-height: inherit;" /> -->
    </van-cell>
    <van-cell v-if="!historyList.length" title="没有数据。。。" />
  </div>
</template>

<script>
import { getMysearch } from "@/api/axios";
import { getItem } from "@/api/storage";
export default {
  name: "SearchHistory",
  data() {
    return {
      historyList: [],//历史记录
      showIcon: false, //每列的删除图标
      isDelShow: false, //编辑的切换状态
    };
  },
  methods: {
    //   获取登录状态下的历史记录
    async getSearch() {
      try {
        const { data: res } = await getMysearch();
        // console.log(res);
        this.historyList = res.data.keywords;
      } catch (err) {
        console.log(err);
      }
    },

    // 获取未登录状态下的本地历史记录
    getLocalityHistory() {
      this.historyList = getItem("keywords") || [];
    },
    delAll() {
      // 删除所有
      console.log("删除所有");
    },
    delOneself() {
      console.log("删除自己");
    },
  },
  created() {
    // 判断是否为登录状态===是则获取历史记录
    if (this.$store.state.login.userToken) {
      this.getSearch();
    } else {
      // 查看本地储存数据
      this.getLocalityHistory();
    }
  },
  
};
</script>

<style scoped lang='less'>
.search-history {
  .van-cell {
    align-items: center;
    .van-cell__value {
      span {
        margin: 0 5px;
      }
    }
  }
  //   /deep/
}
</style>